<template>
    <div>
        <el-container>
            <el-header>小U后台管理系统
              <div>欢迎用户:{{ store.getters.getUser.username }}</div>
              <el-button @click="out" class='out' size="small">退出</el-button>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu
                      active-text-color="#ffd04b"
                      background-color="#545c64"
                      class="el-menu-vertical-demo"
                      :default-active="defaultActive"
                      text-color="#fff"
                      router
                      unique-opened
                      :height="height"
                    >
                        <el-menu-item index="/home">
                              <el-icon><Menu /></el-icon>
                              <span>首页</span>
                            </el-menu-item>
                            <el-sub-menu v-for="item in store.getters.getUser.menus" :index="item.id.toString()">
                              <template #title>
                                <el-icon><component :is="item.icon" /></el-icon>
                                <span>{{item.title}}</span>
                              </template>
                              <!-- <el-menu-item-group> -->
                                <el-menu-item v-for="menu in item.children" :index="menu.url">{{menu.title}}</el-menu-item>
                              <!-- </el-menu-item-group> -->
                                
                            </el-sub-menu>
                        </el-menu>
                </el-aside>
                <el-main>
                  <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { useRouter,useRoute } from 'vue-router';
import { useStore } from 'vuex';
let store = useStore();
let router = useRouter();
let route = useRoute();
let defaultActive = route.path
let height = '100vh';
let out = ()=>{
  store.dispatch('changeUserAction',false);
  router.push('/login')
}
</script>

<style  scoped>
.el-menu{
  height:100vh;
}
.el-header{
  text-align: center;
  padding-top: 20px;
  position: relative;
}
.el-button{
  position: absolute;
  right: 5px;
  top: 25px;
}
</style>